<!--业务分析-->
<template>
  <div class="">
    <app-header></app-header>
    <div class="bus-ana-tit">订单分析</div>
    <div class="bus-ana-table">
      <ul class="tr-header cf">
        <li></li>
        <li>客户数</li>
        <li>金额(元)</li>
        <li>品种数</li>
        <li>数量</li>
      </ul>
      <ul class="tr-body cf" v-for="item in orderAnalysis">
        <li>{{item.tiemtype}}</li>
        <li>{{item.CustomerNumbers}}</li>
        <li>{{item.Amount}}</li>
        <li>{{item.VarietiesNumbers}}</li>
        <li>{{item.OrderNumbers}}</li>
      </ul>
    </div>
    <!-- <div class="bus-ana-tit">客户总数分析</div>
    <div class="bus-anachart-wrap">
      <div class="bus-ana-chart">
        <div id="anaCharts" class="chart-wrap"></div>
      </div>
      <p class="totalnum">客户总数：共{{CustomerAnalysis.CustomerTotal}}人</p>
      <ul class="tag cf">
        <li>医院</li>
        <li>仓管</li>
        <li>开票员</li>
        <li>业务经理</li>
        <li>配送员</li>
      </ul>
    </div> -->
    <div class="bus-ana-tit">业务员销量分析</div>
    <div id="anaSaleman" class="bus-anaxis"></div>
    <!-- <div class="bus-ana-tit">客户拜访分析<em class="tip f-r">最近7天拜访覆盖率</em></div>
    <div id="anaItem" class="bus-anaxis"></div> -->
    <ul class="ten-ana-menu cf">
      <router-link tag="li" to="/order/cusrank?type=MedName"><i class="iconfont icon-client"></i><em>客户排行</em></router-link>
      <router-link tag="li" to="/order/cusrank?type=BuyerName"><i class="iconfont icon-business"></i><em>业务员排行</em></router-link>
      <!-- <router-link tag="li" to="/order/cusrank?type=GoodsName"><i class="iconfont icon-products"></i><em>商品排行</em></router-link>
      <router-link tag="li" to="/order/fillrate"><i class="iconfont icon-complete"></i><em>订单满足率</em></router-link> -->
    </ul>
  </div>
</template>

<script>
import echarts from "$static/echarts/echarts.common.min.js";
import appHeader from '@/components/core/header/app_header.vue';
export default {
  components: {
    appHeader
  },
  name: "analysis",
  data() {
    return {
      year: "",
      month: "",
      day: "",
      hospital: "",
      Salesman: "",
      ware: "",
      ticket: "",
      manage: "",
      orderAnalysis: [],
      CustomerAnalysis: [],
      CustomerWeek: [],
      hospitaldata: [],
      Salesmandata: [],
      waredata: [],
      ticketdata: [],
      managedata: [],
      SalesmanName: [],
      SalesmanNumbers: [],
      SalesmanAmount: []
    };
  },
  mounted() {
    this.$nextTick(function() {
      this.getData();
    });
  },
  methods: {
    getData: function() {
      var _this = this;
      var info = JSON.parse(localStorage.userinfo);
      var queryTop = {
        TenantGUID: info.TenantGUID,
        CorpGuid: info.CorpGuid
      };
      this.Ajax.post("BusinessAnalysisApi",queryTop).then(function(resp) {
        if (resp.IsSuccess) {
          _this.orderAnalysis = resp.Datas;
        }
      });

      var oDate = new Date();
      _this.groupName = _this.$route.query.type;
      _this.year = oDate.getFullYear();
      _this.month = oDate.getMonth() + 1;
      _this.day = oDate.getDate();
      var query = {
        year: _this.year,
        month: _this.month,
        day: "",
        TenantGUID: info.TenantGUID,
        CorpGuid: info.CorpGuid
      };
      this.Ajax.post("CustomerSaleQtyTopApi", query).then(function(resp) {
        if (resp.IsSuccess) {
          resp.Datas.forEach(function(element) {
            _this.SalesmanName.push(element.MedName);
            _this.SalesmanNumbers.push(element.DetailSum);
          }, this);
        }
        console.log(_this.SalesmanName);
        _this.showSaleMan();
      });
      this.Ajax.post("CustomerSaleTopApi", query).then(function(resp) {
        if (resp.IsSuccess) {
          resp.Datas.forEach(function(element) {
            _this.SalesmanAmount.push(element.DetailSum);
          }, this);
        }
        _this.showSaleMan();
      });
    },
    showAxis() {
      var _this = this;
      var myChart = echarts.init(document.getElementById("anaAxis")),
        option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985"
              }
            }
          },
          legend: {
            data: ["医院", "仓管", "开票员", "业务经理", "配送员"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
            }
          ],
          yAxis: [
            {
              type: "value"
            }
          ],
          series: [
            {
              name: "医院",
              type: "line",
              stack: "总量",
              areaStyle: {
                normal: {}
              },
              data: _this.hospitaldata
            },
            {
              name: "仓管",
              type: "line",
              stack: "总量",
              areaStyle: {
                normal: {}
              },
              data: _this.waredata
            },
            {
              name: "开票员",
              type: "line",
              stack: "总量",
              areaStyle: {
                normal: {}
              },
              data: _this.ticketdata
            },
            {
              name: "业务经理",
              type: "line",
              stack: "总量",
              areaStyle: {
                normal: {}
              },
              data: _this.Salesmandata
            },
            {
              name: "配送员",
              type: "line",
              stack: "总量",
              areaStyle: {
                normal: {}
              },
              data: _this.managedata
            }
          ],
          color: ["#ea9a39", "#F5BEBC", "#A6CE40", "#00d6e3", "#eb444e"]
        };
      myChart.setOption(option);
    },
    showItem() {
      var myChart = echarts.init(document.getElementById("anaItem")),
        option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            right: 10,
            bottom: 20,
            data: ["拜访客户数", "未拜访客户数"]
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: ["55%", "80%"],
              center: ["30%", "50%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {
                  value: 335,
                  name: "拜访客户数"
                },
                {
                  value: 310,
                  name: "未拜访客户数"
                }
              ]
            }
          ],
          color: ["#77babd", "#dddddd"]
        };
      myChart.setOption(option);
    },
    showSaleMan() {
      var _this = this;
      var myChart = echarts.init(document.getElementById("anaSaleman")),
        option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ["商品销量"]
          },
          grid: {
            left: "4%",
            right: "3%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "value"
          },
          yAxis: {
            type: "category",
            data: _this.SalesmanName,
            axisLabel:{
              rotate:90
            }
          },
          series: [
            {
              name: "商品销量",
              type: "bar",
              stack: "总量",
              label: {
                normal: {
                  show: true,
                  position: "insideRight"
                }
              },
              data: _this.SalesmanNumbers
            }
          ],
          color: ["#77babd"]
        };
      myChart.setOption(option);
    }
  }
};
</script>
